<template>
  <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="修改密码" name="password" :rules="[{ required: true, message: '请你输入你的用户名!' }]">
      <a-input v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item label="确认密码" name="averpassword" :rules="[{ required: true, message: '请你输入你的密码!' }]">
      <a-input-password v-model:value="formState.averpassword">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" class="login-form-button">
        提交修改
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
/* message弹窗 */
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
import { reactive, computed, ref } from "vue"
import axios from "axios"
import { LockOutlined } from "@ant-design/icons-vue"

const formState = reactive({
  password: "",
  averpassword: "",
  remember: true,
})

/* 存储当前用户名 */
const CurrentUser = ref("")

//修改密码失败的消息
const onFinish = (values) => {
  console.log(values.values)
}
//修改密码失败的消息
const onFinishFailed = (errorInfo) => {
  const onUser = JSON.parse(localStorage.getItem("onUser"))
  if (!errorInfo.values.password || !errorInfo.values.averpassword) {
    message.info("请输入用户名和密码")
  } else if (errorInfo.values.password != errorInfo.values.averpassword) {
    message.error("两次密码不一致")
  } else if (errorInfo.values.password == errorInfo.values.averpassword) {
    axios
      .put("http://localhost:3000/userone", {
        user_name: onUser[1],
        user_password: `'${errorInfo.values.averpassword}'`,
      })
      .then(message.success("修改成功"))
  }
}

const disabled = computed(() => {
  return !(formState.username && formState.password)
})
</script>

<style scoped>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}

.login-form-button {
  width: 100%;
}
</style>
